<script setup lang="ts">
import { ref, nextTick } from 'vue';
import Sheet from './components/Sheet.vue'
import luckySheet from './luckySheet/index.vue'
import type { UploadFile } from 'element-plus';


const univerRef = ref<InstanceType<typeof Sheet> | null>(null);
const uploadRef = ref()
async function save() {
  await nextTick()
  const result = univerRef.value?.saveWorkbook()
  localStorage.setItem('sheet-data', JSON.stringify(result, null, 2));
}

async function handleImport(rawFile: UploadFile) {
  console.info(rawFile)
  // const res = await fetch('http://localhost:8888/sheet/import', {
  //   method: 'GET',
  // })
  // console.info(await res.json())
  const formData = new FormData();
  formData.append('file', rawFile.raw!);
  formData.append('name', rawFile.name);
  uploadRef.value!.submit()

}

async function fileHttp(options: any) {
  console.info(options)

  const {
    file,         // 待上传的文件
    onProgress,   // 进度回调
    onSuccess,    // 成功回调
    onError,      // 失败回调
    data,         // 额外参数（如 { id: 1, type: 'avatar' }）
    headers,      // 自定义请求头（如 { Authorization: 'Bearer token' }）
  } = options;

  try {
    // 2. 构建 FormData（文件上传必须用 multipart/form-data 格式）
    const formData = new FormData();
    formData.append('file', file); // 添加上传文件（字段名需与后端接口一致）

    // 3. 附加额外参数（如果有的话）
    if (data) {
      Object.keys(data).forEach(key => {
        formData.append(key, data[key]); // 如添加 id: 1 → formData 中会有 'id' 字段
      });
    }

    // 4. 发送 Fetch 请求
    const response = await fetch('http://localhost:8888/sheet/import', {
      method: 'POST',
      headers: {
        // 'Content-Type': 'multipart/form-data'
      },
      body: formData,
      // 5. 监听上传进度（关键：通过 ReadableStream 跟踪进度）
      signal: AbortSignal.timeout(30000), // 30秒超时
    });

    // 6. 处理响应状态
    if (!response.ok) {
      throw new Error(`上传失败，状态码：${response.status}`);
    }

    // 7. 解析服务端返回数据（根据后端格式调整，如 JSON、文本等）
    const result = await response.json();

    // 8. 通知组件上传成功（传入服务端返回数据）
    onSuccess(result);

  } catch (error) {
    // 9. 处理错误（网络错误、超时、后端异常等）
    onError(error);
  }
}
</script>

<template>
  <div class="flex">
    <!-- <button @click="save">保存数据</button>
    <el-upload ref="uploadRef" class="upload-demo" :on-change="handleImport" :http-request="fileHttp"
      :auto-upload="false">
      <template #trigger>
        <el-button type="primary">导入数据</el-button>
      </template>

    </el-upload> -->

  </div>
  <luckySheet ref="univerRef" />
  <!-- <Sheet ref="univerRef" /> -->
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.flex {
  display: flex;
  justify-content: end;
  gap: 20px;
  margin-bottom: 20px;
}
</style>
